<template>
    <div class="departmentDetail">
        <el-button size="small" class="goBack" @click="goBack">返回</el-button>
        <div class="baseInfo">
            <h1>基本信息</h1>
            <el-row>
                <el-col :span="12">
                    <div class="grid-content">
                        <label for="">科室名称</label>
                        <el-input v-model="name"  :disabled="isdisabled"></el-input>
                    </div>
                </el-col>

                <el-col :span="12">
                    <div class="grid-content">
                        <label for="">科室编码</label>
                        <el-input v-model="code"  :disabled="true"></el-input>
                    </div>
                </el-col>

            </el-row>

            <el-row>
                <el-col :span="12">
                    <div class="grid-content">
                        <label for="">科室权重</label>
                        <el-input v-model="weight" maxlength="3"  oninput="var v=this.value||'';v=v.replace(/[^\d]/g,'');if(v.length==1 && v==0){v=''};this.value=v.substr(0,3);"></el-input>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content">
                        <label for="">科室位置</label>
                        <el-input v-model="address"  maxlength="50"></el-input>
                    </div>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <div class="grid-content">
                        <label for="">病区地址</label>
                        <el-input v-model="ward" maxlength="50"  ></el-input>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content">
                        <label for="">科室电话</label>
                        <el-input v-model="phone" maxlength="20" ></el-input>
                    </div>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <div class="grid-content">
                        <label for="">一句介绍</label>
                        <el-input maxlength="18"  show-word-limit placeholder="请输入内容" v-model="summary">
                        </el-input>
                    </div>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <div class="grid-content">
                        <label style="align-self:flex-start;" for="">科室介绍</label>
                        <el-input type="textarea" size="small" maxlength="2000" :autosize="{ minRows: 8}" show-word-limit placeholder="请输入内容" v-model="description">
                        </el-input>
                    </div>
                </el-col>
            </el-row>
        </div>

        <div class="btn-group" v-if="isdisabled">
            <el-button type="primary" size="small" @click="update">修改</el-button>
            <el-button size="small" @click="fail">放弃</el-button>
        </div>
        <div class="btn-group" v-else>
            <el-button type="primary" size="small" @click="add">新增</el-button>
            <el-button size="small" @click="fail">放弃</el-button>
        </div>
        <div class="popup">
            <el-dialog
                    title="提示"
                    :visible.sync="dialogVisible"
                    width="30%">
                <span>是否确定放弃本次操作？</span>
                <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">我再想想</el-button>
        <el-button type="primary" @click="giveup">确定放弃</el-button>
        </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import { departmentListGet,departmentUpdate,departmentAdd } from "../../api/department";
    export default {
        name: "detail",
        data() {
            return {
                name: "",
                code: "",
                weight: 0,
                address: "",
                ward: "",
                phone: "",
                summary: "",
                description: "",
                dialogVisible: false,
                isdisabled:false
            }
        },

        created() {
            if(this.$route.query.id){
                this.backShow((this.$route.query.id));
                this.isdisabled = true;
            }
        },

        mounted() {

        },

        methods: {
            async backShow(id){
                try{
                    let { list } = await departmentListGet({
                        pageIndex:1,
                        pageSize:1,
                        departCode:id,
                        d_hospital:sessionStorage.getItem('hospitalId')
                    });
                    this.name = list[0].d_name;
                    this.code = list[0].d_id;
                    this.weight = list[0].d_weight;
                    this.address = list[0].d_address;
                    this.ward = list[0].d_ward;
                    this.phone = list[0].d_phone;
                    this.summary = list[0].d_summary;
                    this.description = list[0].d_description;
                }catch (e) {
                    console.error(e);
                }

            },
            goBack() {
                this.$router.go(-1);
            },
            async update(){
                if(!this.name){
                    this.$message.error('科室名称不能为空')
                    return
                }
                try{
                    let res = await departmentUpdate({
                        d_name:this.name,
                        d_id:this.code,
                        d_weight:this.weight,
                        d_address:this.address,
                        d_ward:this.ward,
                        d_phone:this.phone,
                        d_summary:this.summary,
                        d_description:this.description,
                        d_hospital:sessionStorage.getItem('hospitalId')
                    })
                    if(res){
                        this.$message.success(res.msg)
                        setTimeout(()=>{
                            this.$router.push({
                                path: "/departmentManage"
                            });
                        },100)
                    }
                    console.log(res)
                }catch (e) {
                    this.$message.error('修改失败！')
                    console.error(e)
                }
            },
            async add(){
                if(!this.name){
                    this.$message.error('科室名称不能为空')
                    return
                }
                try{
                    let res = await departmentAdd({
                        d_name:this.name,
                        d_weight:this.weight,
                        d_address:this.address,
                        d_ward:this.ward,
                        d_phone:this.phone,
                        d_summary:this.summary,
                        d_description:this.description,
                        d_hospital:sessionStorage.getItem('hospitalId')
                    })
                    if(res){
                        this.$message.success(res.msg)
                        setTimeout(()=>{
                            this.$router.push({
                                path: "/departmentManage"
                            });
                        },100)
                    }
                }catch (e) {
                    console.error(e)
                }
            },
            fail() {
                this.dialogVisible = true
            },
            giveup(){
                this.dialogVisible = false
                this.$router.push({
                    path: "/departmentManage"
                });
            },
        },
    }
</script>

<style scoped lang='scss'>
    .departmentDetail{
        padding: 0 20px 20px 20px;
        .baseInfo {
            background: #fff;
            box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
            padding-bottom: 10px;
            margin: 20px 0 0 0 ;
            color: #2c3e50;
            font-weight: bold;
            & > h1 {
                padding: 0 20px;
                line-height: 50px;
                font-size: 16px;
                font-weight: bolder;
                border-bottom: 1px solid #e8eaec;
            }
            .el-row {
                width: 100%;
                margin: 15px 0;
                display: flex;
                padding: 0 20px 0 0;
                .el-col {
                    .grid-content {
                        display: flex;
                        align-items: center;
                        label {
                            display: inline-block;
                            flex: 0 0 70px;
                            padding-left: 12px;
                            padding-right: 8px;
                            width: 70px;
                        }
                        .icon-uploader {
                            width: 80px;
                            height: 80px;
                            border: 1px dashed #ccc;
                            cursor: pointer;
                            position: relative;
                            overflow: hidden;
                            text-align: center;
                            .el-upload {
                                width: 80px;
                                height: 80px;
                                img {
                                    width: 80px;
                                    height: 80px;
                                }
                            }
                        }
                        .icon-uploader:hover {
                            border: 1px dashed #409eff;
                        }
                        .icon-uploader:hover span {
                            color: #409eff;
                        }
                        span {
                            color: #ccc;
                            display: block;
                            font-size: 12px;
                            line-height: 80px;
                        }
                        .pic-uploader {
                            width: 176px;
                            height: 80px;
                            border: 1px dashed #ccc;
                            cursor: pointer;
                            position: relative;
                            overflow: hidden;
                            text-align: center;
                            .el-upload {
                                width: 176px;
                                height: 80px;
                                img {
                                    width: 176px;
                                    height: 80px;
                                }
                            }
                        }
                        .pic-uploader:hover {
                            border: 1px dashed #409eff;
                        }
                        .pic-uploader:hover span {
                            color: #409eff;
                        }
                        span {
                            color: #ccc;
                            display: block;
                            font-size: 12px;
                            line-height: 80px;
                        }
                    }
                }
            }
        }
        .btn-group{
            margin-top: 20px;
            text-align: right;
        }
    }
</style>